<template>
  <div id="Content-page" class="travel-page">
    <Paging :pagData="[{ name: '后台设置', router: '/back-setting' }]" />

    <div class="hero">
      <div class="hero-content">
        <h1 class="hero-title">后台设置</h1>
        <p class="hero-sub">定制你的旅行风格头像与昵称</p>
      </div>
    </div>

    <div class="content-main">
      <div class="settings-grid">
        <!-- 资料卡片 -->
        <div class="profile-card glass-card">
          <div class="avatar-wrap">
            <img :src="adminData.avatarUrl" alt="avatar" />
          </div>
          <div class="profile-info">
            <p class="nickname">{{ adminData.nickname }}</p>
            <el-button
              class="toggle-button"
              type="primary"
              :plain="!modify"
              @click="modify = !modify"
            >
              {{ modify ? '取消修改' : '修改资料' }}
            </el-button>
          </div>
        </div>

        <!-- 编辑面板 -->
        <transition name="fade-slide">
          <div v-if="modify" class="edit-panel glass-card">
            <div class="upload-card">
              <el-upload
                ref="uploadEle"
                :action="imageUrl"
                accept=".jpg,.png,.jpeg,.webp"
                :limit="1"
                :show-file-list="false"
                :on-success="onSuccess"
                :on-error="onError"
              >
                <div class="upload-dropzone" :class="{ filled: uploadImgurl !== '' }">
                  <template v-if="uploadImgurl == ''">
                    <el-icon :size="24" class="upload-icon"><Plus /></el-icon>
                    <span class="upload-tip">上传新头像（≤500KB）</span>
                    <span class="upload-subtip">支持 jpg / png / jpeg / webp</span>
                  </template>
                  <template v-else>
                    <img :src="uploadImgurl" alt="" />
                  </template>
                </div>
              </el-upload>
            </div>

            <div class="form-card">
              <el-form label-position="top" class="form">
                <el-form-item label="新的昵称">
                  <el-input placeholder="输入新的昵称" v-model="nickname" />
                </el-form-item>
                <el-button type="success" class="submit-button" :loading="loadIng" @click="subMit">
                  保存修改
                </el-button>
              </el-form>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 顶部导航组件
import Paging from '@/page/components/Paging-component.vue'
import { Plus } from '@element-plus/icons-vue'
import { ref, onMounted, reactive } from 'vue'
import type { UploadFile, UploadFiles } from 'element-plus'
import type { UploadImageResponse } from '@/type/global'

import emitter from '@/utils/event'
import { useUserStore } from '@/stores'
import { modifyAdminInfoAPI } from '@/api/back-setting'
const userStore = useUserStore()
const imageUrl = import.meta.env.VITE_API_IMAGE_URL
// 获取本地缓存的管理员数据
const adminData = reactive({
  avatarUrl: '',
  nickname: '',
  _id: '',
})

onMounted(() => {
  const userInfo = userStore.userInfo
  if (userInfo) {
    adminData.avatarUrl = userInfo.avatarUrl
    adminData.nickname = userInfo.nickname
    adminData._id = userInfo._id
  }
})

// 显示||隐藏右边修改
const modify = ref(false)
// 提交按钮loading
const loadIng = ref(false)
// 未上传和已上传的图片展示
const uploadImgurl = ref('')
const uploadEle = ref()
// 上传成功
function onSuccess(response: UploadImageResponse) {
  uploadImgurl.value = response.data[0]
  uploadEle.value.clearFiles()
}
// 上传失败
function onError(error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) {
  console.log(error, uploadFile, uploadFiles)
  ElMessage.error('上传图片失败')
  ElMessage('上传图片失败')
}
// 昵称
const nickname = ref('')
// 提交
async function subMit() {
  console.log(111)
  try {
    console.log(222)
    console.log(adminData._id)
    console.log(uploadImgurl.value)
    console.log(nickname.value)
    loadIng.value = true
    await modifyAdminInfoAPI({
      _id: adminData._id,
      avatarUrl: uploadImgurl.value,
      nickname: nickname.value,
    })
    console.log(333)
    const getadminInfor = userStore.userInfo
    if (!getadminInfor) {
      ElMessage.error('获取管理员信息失败，请重新登录')
      loadIng.value = false
      return
    }
    getadminInfor.avatarUrl = uploadImgurl.value
    getadminInfor.nickname = nickname.value
    userStore.setUserInfo(getadminInfor)
    adminData.avatarUrl = uploadImgurl.value
    adminData.nickname = nickname.value
    uploadImgurl.value = ''
    nickname.value = ''
    modify.value = false
    emitter.emit('upload-Admin-Success')
    loadIng.value = false
  } catch (error) {
    console.log(error)
    loadIng.value = false
  }
}
</script>

<style scoped>
/* 背景与主题 */
.travel-page {
  min-height: 100vh;
  background:
    radial-gradient(1200px 300px at 10% -10%, rgba(255, 200, 124, 0.28), transparent 60%),
    radial-gradient(1200px 300px at 110% 10%, rgba(76, 201, 240, 0.22), transparent 60%),
    linear-gradient(160deg, #e6f7ff 0%, #fff 35%, #fef6f0 100%);
}

.hero {
  position: relative;
  margin: 12px 0 24px;
  padding: 32px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(255, 160, 122, 0.18));
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  inset: -30% -10% auto auto;
  height: 180px;
  width: 480px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.9), transparent 40%),
    radial-gradient(circle at 70% 40%, rgba(255, 255, 255, 0.55), transparent 42%),
    radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.45), transparent 40%);
  filter: blur(20px);
  opacity: 0.6;
}
.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
}
.hero-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #0f3352;
}
.hero-sub {
  margin-top: 6px;
  color: #5b748a;
  font-size: 14px;
}

/* 通用玻璃卡片 */
.glass-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(16, 85, 129, 0.08);
}

/* 布局 */
.content-main {
  padding: 0 12px 24px;
}
.settings-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  align-items: start;
}

/* 资料卡片 */
.profile-card {
  padding: 20px;
  text-align: center;
}
.avatar-wrap {
  width: 180px;
  height: 180px;
  margin: 6px auto 14px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 51, 82, 0.12);
  border: 3px solid rgba(255, 255, 255, 0.8);
}
.avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-info .nickname {
  margin: 6px 0 14px;
  font-size: 18px;
  font-weight: 600;
  color: #0f3352;
}
.toggle-button {
  --el-color-primary: #0ea5e9;
  border-radius: 10px;
  padding: 10px 16px;
  box-shadow: 0 6px 16px rgba(14, 165, 233, 0.22);
}

/* 编辑面板 */
.edit-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 20px;
}
.upload-card {
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-dropzone {
  width: 100%;
  max-width: 360px;
  height: 240px;
  border: 2px dashed rgba(15, 51, 82, 0.25);
  border-radius: 14px;
  color: rgba(15, 51, 82, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.6));
}
.upload-dropzone:hover {
  border-color: #0ea5e9;
  box-shadow: 0 10px 24px rgba(14, 165, 233, 0.18);
  transform: translateY(-1px);
}
.upload-dropzone.filled {
  padding: 0;
}
.upload-dropzone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.upload-icon {
  margin-bottom: 8px;
  color: #0ea5e9;
}
.upload-tip {
  font-size: 14px;
  color: #0f3352;
}
.upload-subtip {
  font-size: 12px;
  color: #6a7f93;
  margin-top: 4px;
}

/* 表单 */
.form-card {
  padding: 6px 6px 6px 0;
}
.form :deep(.el-form-item__label) {
  color: #35546d;
  font-weight: 600;
}
.submit-button {
  margin-top: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(16, 185, 129, 0.22);
}

/* 动效 */
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.25s ease;
}
.fade-slide-enter-from,
.fade-slide-leave-to {
  opacity: 0;
  transform: translateY(6px);
}

/* 响应式 */
@media (max-width: 992px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .edit-panel {
    grid-template-columns: 1fr;
  }
  .avatar-wrap {
    width: 160px;
    height: 160px;
  }
}
</style>
